<template>
	<view class="niceui-flex-column" style="height: 111vh;">
		<swiper class="swiper" :circular="circular" :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval"
			:duration="duration" :indicator-color="indicatorColor" :indicator-active-color="activeColor[current]"
			:previous-margin="leftRightMargin" :next-margin="leftRightMargin"
			@change="changeItem">
			<swiper-item  v-for="(item,index) in viplist">
				<view class="niceui-member-card niceui-flex-column" :class="memberLevel+'-color'">
					<view class="member-info">	
						<view class="niceui-flex-column">
							<text class="member-name">{{item.name}}会员</text>
							<view class="niceui-flex-column-my">
								<image :src="user.avatar"></image>
								<view>{{user.nickname}}</view>
							</view>
							<!-- <text class="member-end">会员到期时间：2024.01.12</text> -->
						</view>
						<text class="member-status" :class="'status-'+(item.id)">待提升</text>
					</view>
					<view class="grow-up-info niceui-flex-column">
						<view class="grow-up">
							<text>{{user.countscore}}/{{item.end_integral+1}}升级 ></text>
							<!-- <text>还差1成长值升级为{{memberName[current]}}会员</text> -->
						</view>
						<view class="grow-up-progress" :class="'progress-'+(item.id)"></view>
					</view>
				</view>
			</swiper-item>
		</swiper>
		
		<view class="niceui-list">
			<view class="niceui-list-title">
				<text>当前已成功解锁<text class="red-strong">{{viplist[current]['json'].length}}项</text>功能权益</text>
			</view>
			<view class="niceui-list-content">
				
				<block  v-for="(item,index) in viplist[current]['json']" :key="index" v-if="viplist.length > 0">
					<view class="niceui-content-item" >
						<image class="niceui-content-img" :src="item.image"></image>
						<text class="niceui-content-item-text">{{item.name}}</text>
					</view>
					
				</block>
			
			</view>
		</view>
		
		
		<view class="niceui-faq niceui-flex-column">
			<view class="niceui-faq-title">权益入口</view>
			<view class="niceui-faq-content niceui-flex-column">
				
				<view class="niceui-faq-content-item">
					<view class="niceui-faq-item-info">
						<view class="niceui-faq-item-info-image">
							<image src="../../static/vip/gouwu.png"></image>
						</view>
						<view class="niceui-flex-column">
							<text class="niceui-faq-item-text">兑换商品</text>
							<text class="niceui-faq-item-desc">消费金额得到积分可兑换商品</text>
						</view>
					</view>
					<view class="niceui-faq-open" @click="urlClick('/pages/exchange/exchange')">立即进入</view>
				</view>
				
				<view class="niceui-faq-content-item">
					<view class="niceui-faq-item-info">
						<view class="niceui-faq-item-info-image">
							<image src="../../static/vip/sao.png"></image>
						</view>
						<view class="niceui-flex-column">
							<text class="niceui-faq-item-text">会员码</text>
							<text class="niceui-faq-item-desc">到店消费出示会员码可获得积分</text>
						</view>
					</view>
					<view class="niceui-faq-open" @click="hideClick()">点击打开</view>
				</view>
				
				
				<view class="niceui-faq-content-item">
					<view class="niceui-faq-item-info">
						<view class="niceui-faq-item-info-image">
							<image src="../../static/vip/share.png"></image>
						</view>
						<view class="niceui-flex-column">
							<text class="niceui-faq-item-text">分享好友</text>
							<text class="niceui-faq-item-desc">邀请好友加入可获得积分</text>
						</view>
					</view>
					<view class="niceui-faq-open" @click="shareClick()">点击分享</view>
				</view>
				
				<view class="niceui-faq-content-item">
					<view class="niceui-faq-item-info">
						<view class="niceui-faq-item-info-image">
							<image src="../../static/vip/huo.png"></image>
						</view>
						<view class="niceui-flex-column">
							<text class="niceui-faq-item-text">活动中心</text>
							<text class="niceui-faq-item-desc">查看门店优惠活动</text>
						</view>
					</view>
					<view class="niceui-faq-open" @click="urlClick('/pages/activity/activity')">点击进入</view>
				</view>
				
			</view>
		</view>
		
		<view class="bagtanchuan" @click="bagClick()" v-if="hide==1"></view>
		
		<view class="bodytanchaun"  v-if="hide==1">
			<image :src="user.qrcode"></image>
			<view>出示会员码消费得积分</view>
		</view>
	</view>
</template>

<script>
	let jweixin = require('jweixin-module');
	export default {
		data() {
			return {
				hide :0,
				viplist : [],
				user    : [],
				circular:false,
				indicatorDots: false,
				autoplay: false,
				interval: 2000,
				duration: 500,
				indicatorColor:'#e9e9e9',
				indicatorActiveColor:'red',
				leftRightMargin:'50rpx',
				current:0,
				memberLevel:'member1',
				activeColor:['#dbdfeb','#f7dbac','#ffe3cb','#323a53','#1d1b1b'],  //#a7b0e6; #e6bd79; #d49a67;
				growUp:['200/500','600/2000','2001/5000','5001/50000','50001/100000'], 
				memberName:['花粉','花蜜','花匠','花咖','花神'],
				
				
			}
		},
		onLoad() {
			let that = this;
			that.$api.vip({}).then(res=>{
				that.viplist  = res.data.list;
				console.log(res);
			})
			that.$api.userinfo({}).then(res=>{
				that.user = res.data.user;
				console.log(that.user);
			})
			jweixin.config({
			   debug: false,
			   appId: data.appId,
			   timestamp: data.timestamp,
			   nonceStr: data.nonceStr,
			   signature: data.signature,
			   jsApiList: ['updateAppMessageShareData'],
			});
			
		},
		methods: {
			shareClick(){
				let that  = this;
				jweixin.share({  
							 title:'12',
							  desc: '2323',  
							  
						});  

				// wx.ready(function () {   //需在用户可能点击分享按钮前就先调用
				  // jweixin.updateAppMessageShareData({ 
				  //   title: '邀请好友加入', // 分享标题
				  //   // desc: '', // 分享描述
				  //   link: 'http://hexingv2.kpg888.top/#/pages/vip/vip?pid='+that.user.id, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
				  //   // imgUrl: '', // 分享图标
				  //   success: function () {
				  //     // 设置成功
				  //   }
				  // })
				// });
			},
			bagClick(){
				this.hide = 0;
			},
			hideClick(){
				this.hide = 1;
			},
			changeItem(e){
				this.current = e.detail.current;
				console.log(this.current);
				this.memberLevel = "member"+(e.detail.current+1)
			},
			urlClick(e){
				let that = this;
				uni.navigateTo({
					url: e
				});
			}
		}
	}
</script>

<style>
	
	@font-face {
		font-family: texticons;
		font-weight: normal;
		font-style: normal;
		src: url('https://at.alicdn.com/t/c/font_4218190_itplyreymu.ttf?t=1702390147146') format('truetype');
	}

	page,
	view {
		display: flex;
	}

	page {
		background-color: #fff;
	}

	.niceui-flex-column {
		flex-direction: column;
	}
</style>
<style lang="scss" scoped>
	$head-color:#5b8cff;  //5b8cff 4194fc
	$radius:5rpx;
	
	$list-margin:15rpx;
	.swiper{
		width: 100vw;
		padding: 30rpx 0 0;
		height: 360rpx;
		box-sizing: border-box;
	}
	.niceui-member-card{
		height: calc(100% - 60rpx);
		background-color: #d7dfeb;
		color:#555d6e;
		border-radius: 30rpx;
		padding: 30rpx 35rpx 30rpx 40rpx;
		box-sizing: border-box;
		justify-content:space-between;
		
		width: calc(100vw - 120rpx);
		margin: 0 auto;
	}
	.member-info{
		justify-content: space-between;
		font-weight: bold;
		font-size: 38rpx;
		.member-end{
			font-size: 22rpx;
		}
		.member-status{
			background-color: #f3f7f7;
			font-weight: bold;
			font-size: 22rpx;
			border-radius: 30rpx;
			padding:0 25rpx;
			box-sizing: border-box;
			height:45rpx;
			line-height:45rpx;
		}
		.status-2{
			background-color: #f3f7f7;
		}
		.status-3{
			background-color: #fef6eb;
		}
		
		.status-4{
			background-color: #625959;
		}
	}
	.grow-up-info{
		margin-bottom: 10rpx;
	}
	.grow-up{
		justify-content: space-between;
		font-weight: bold;
		font-size: 24rpx;
	}
	.grow-up-progress{
		margin-top: 10rpx;
		width: 100%;
		height: 11rpx;
		background-color: #b8bdc7;
		border-radius: 10rpx;
		overflow: hidden;
	}
	.grow-up-progress::after{
		content:'';
		display: inline-block;;
		width: 30%;
		height: 100%;
		background-color: #f7fbfb;
	}
	
	.progress-2{
		background-color: #b8bdc7;
	}
	.progress-3{
		background-color: #e2bd81;
	}
	.progress-4{
		background-color: #030303;
	}
	
	
	// .progress-1{
	// 	background-color: #b8bdc7;
	// }
	// .progress-2{
	// 	background-color: #e2bd81;
	// }
	// .progress-3{
	// 	background-color: #f7cfa6;
	// }
	// .progress-4{
	// 	background-color: #232b45;
	// }
	// .progress-3{
	// 	background-color: #030303;
	// }
	.niceui-list {
		background-color: #FFFFFF;
		margin:0 auto 0;
		padding-bottom:$list-margin ;
		width: calc(100vw - 0rpx);
		flex-direction: column;
		border-radius: $radius;
	}
	
	.niceui-list-title{
		padding:0rpx 50rpx 30rpx;
		font-size:30rpx;
		color:#333;
		font-weight: 500;
		width: 100vw;
		justify-content: flex-start;
	}
	.red-strong{
		color:red;
	}
	.niceui-list-content{
		box-sizing: border-box;
		padding: 25rpx 40rpx 0 40rpx;
		flex-wrap: wrap;
		.niceui-content-item{
			width:25%;
			box-sizing: border-box;
			padding:0 0 35rpx 0rpx;
			align-items: center;
			flex-direction: column;
			.niceui-content-item-icon{
				font-size:50rpx;
				font-weight: bold;
				font-family: texticons;
				border-radius: 50%;
				padding: 15rpx;
				width: 50rpx;
				height: 50rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				margin-bottom: 10rpx;
			}
			.niceui-content-item-text{
				color:#666;
				font-size:24rpx;
				font-weight: 400;
			}
			.niceui-content-item-desc{
				color:#999;
				font-size:24rpx;
				font-weight: 300;
				margin-top: 0rpx;
			}
			
		}
	}
	.member1-color{
		background-image:linear-gradient(#dbdfeb,#e3ebf3);
		color:#555d6e;
	}
	.member2-color{
		background-image:linear-gradient(to right,#f3d39a,#f7dfb5);
		color:#a36a09;
	}

	.member3-color{
		background-image:linear-gradient(to right,#0d0b0b,#454546);
		color:#ffe3cf;
	}
	.niceui-faq{
		background-color: #fff;
		margin:0 auto 40rpx;
		width: calc(100vw - 80rpx);
		box-sizing: border-box;
		
		flex-direction: column;
		border-radius: 30rpx;
		border: solid 0rpx #eaf7ef;
		box-shadow: 0rpx 1rpx 10rpx rgba(0,0,0,0.1);
		overflow: hidden;
		
		.niceui-faq-title{
			background-image: linear-gradient(#eaf7ef,#fff);
			padding:30rpx 40rpx 0rpx;
			box-sizing: border-box;
			font-size:30rpx;
			color:#333;
			font-weight: 600;
		}
	}
	.niceui-faq-content{
		padding:20rpx 30rpx 10rpx 40rpx;
		.niceui-faq-content-item{
			align-items: center;
			justify-content: space-between;
			margin-top: 15rpx;
			margin-bottom: 30rpx;
		}
		.niceui-faq-item-info{
			align-items: center;
			width: 70%;
		}
		.niceui-faq-item-icon{
			font-size:50rpx;
			font-weight: bold;
			font-family: texticons;
			border-radius: 20rpx;
			padding: 20rpx;
			color:#fff;
			margin-right: 20rpx;
		}
		.niceui-faq-item-text{
			color:#333;
			font-size:29rpx;
			font-weight: 400;
		}
		.niceui-faq-item-desc{
			color:#999;
			font-size:23rpx;
			font-weight: 300;
			margin-top: 5rpx;
		}
	}
	.niceui-faq-open{
		background-color: #10b575;
		color:#fff;
		font-weight: bold;
		font-size: 24rpx;
		border-radius: 30rpx;
		padding:0 30rpx;
		box-sizing: border-box;
		height:60rpx;
		line-height:60rpx;
	}
	.icon-color-1{
		background-image: linear-gradient(#72aefe, #4896ff);
	}
	.icon-color-2{
		background-image: linear-gradient(#5ff9d7, #39debd);
	}
	.icon-color-3{
		background-image: linear-gradient(#ffd155, #ffbc04);
	}
	.icon-color-4{
		background-image: linear-gradient(#ff808b, #ff6872);
	}
	.niceui-faq-item-info-image  {
		margin-right: 20rpx;
	}
	.niceui-faq-item-info-image  > image {
		width: 90rpx;
		height: 90rpx;
	}
	.niceui-content-img {
		width: 90rpx;
		height: 90rpx;
	}
	.niceui-flex-column-my {
		display: flex;
		margin-top: 10rpx;
	}
	.niceui-flex-column-my > image {
		width: 64rpx;
		height: 64rpx;
		border-radius: 50%;
		border:4rpx solid #fff;
	}
	.niceui-flex-column-my > view {
		padding-top: 10rpx;
		padding-left: 4rpx;
		font-size: 34rpx;
	}
	.bodytanchaun {
		display: block !important;
	}
	.bodytanchaun  > view {
		text-align: center;
		display: block !important;
	}
</style>